import React from "react";
// 导入antd-moile库
import { Toast } from "antd-mobile";
// 导入List组件库
import { List, AutoSizer } from "react-virtualized";
// 导入axios
import {API} from "../../utils/api";
// 引入样式文件
import "./index.css";
// 导入当前定位城市
import { getCurrentCity } from "../../utils/index";
// 导入NavHeader顶部导航栏
import NavHeader from "../../components/NavHeader"
// 数据格式化的方法
const formatCityData = list => {
  const cityList = {};
  // const cityIndex = []
  // 1遍历list数组得到城市的首字母
  list.forEach(item => {
    // 2获取每一个城市的首字母
    const first = item.short.substr(0, 1);
    // 3判断cityList中是否有该分类
    if (cityList[first]) {
      // 5如果有，直接往该分类中push数据
      cityList[first].push(item);
    } else {
      // 如果没有，就先创建一个数据，然后，把当前城市信息添加加到数组中
      cityList[first] = [item];
    }
  });
  // 使用Object.keys和.sort将cityList进行排序
  const cityIndex = Object.keys(cityList).sort();
  return {
    cityList,
    cityIndex
  };
};
// 处理字母索引的方法
const formatCityIndex = val => {
  switch (val) {
    case "#":
      return "当前定位";
    case "hot":
      return "热门城市";
    default:
      return val.toUpperCase();
  }
};
// title字母的高度
const title_height = 36;
// name字母的高度
const name_height = 50;
// 有房源的城市
const house_city = ['深圳','北京','上海','广州']

export default class CityList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cityList: {},
      cityIndex: [],
      // 设置高亮的索引值
      activeIndex: 0
    };
    this.cityListComponent = React.createRef()
  }
  async componentDidMount() {
    await this.getCityList();
    // 调用measureAllRows方法确保跳转之后的精度问题
    this.cityListComponent.current.measureAllRows()
  }
  async getCityList() {
    // 获取城市数据信息
    const { data: res } = await API.get(
      `/area/city?level=1`
    );
    formatCityData(res.body);
    const { cityList, cityIndex } = formatCityData(res.body);
    // 获取热门城市数据信息
    const { data: hot } = await API.get(`/area/hot`);
    // 将热门城市添加到cityList中
    cityList["hot"] = hot.body;
    // 将热门城市使用unshift添加cityIndex中
    cityIndex.unshift("hot");
    // 当前定位城市
    const curCity = await getCurrentCity();
    // 将当前定位城市添加到cityList中
    cityList["#"] = [curCity];
    // 将当前定位城市使用unshift添加cityIndex中
    cityIndex.unshift("#");
    this.setState(() => {
      return {
        cityList,
        cityIndex
      };
    });
  }
  // 切换当前城市
  changeCity({label,value}) {
    if (house_city.indexOf(label) > -1) {
      // 有，将房源数据存储到本地存储中，并跳转到首页
      localStorage.setItem("city", JSON.stringify({label,value}))
      this.props.history.go(-1)
    } else {
      Toast.info('此城市暂无房源', 1,null, false)
    }
    
  }
  // 渲染每一行的数据的渲染函数
  rowRenderer = ({
    key, // Unique key within array of rows
    index, // 索引号
    style // 指定每一行的位置
  }) => {
    const { cityIndex, cityList } = this.state;
    const cityTitle_num = cityIndex[index];
    // 通过cityTitle_num取到cityList里城市数据
    return (
      <div key={key} style={style} className="city_all">
        <div className="cityTitle">{formatCityIndex(cityTitle_num)}</div>
        {cityList[cityTitle_num].map(item => (
          <div className="cityName" key={item.value} onClick={()=> this.changeCity(item)}>
            {item.label}
          </div>
        ))}
      </div>
    );
  };
  //   设置每一行的高度
  getRowHeight = ({ index }) => {
    // 索引标题高度 + 城市数量 * 城市名称高度
    const { cityList, cityIndex } = this.state;
    return title_height + cityList[cityIndex[index]].length * name_height;
  };
  // 设置右侧字母渲染
  renderCityIndex() {
    // 遍历cityIndex,实现渲染
    const { cityIndex, activeIndex } = this.state;
    return cityIndex.map((item, index) => (
      <li
        className="city_index_item"
        key={item}
        onClick={() => {
          this.cityListComponent.current.scrollToRow(index)
          this.setState(()=> {
            return {
              activeIndex: index
            }
          })
        }}
      >
        <span className={activeIndex === index ? "index-active" : ""}>
          {item === "hot" ? "热" : item.toUpperCase()}
        </span>
      </li>
    ));
  }
  // 用于获取list组件中渲染行的信息
  onRowsRendered = ({startIndex}) =>{
    if (this.state.activeIndex !== startIndex) {
      this.setState(() => {
        return {
          activeIndex: startIndex
        }
      })
    }

  }
  render() {
    return (
      <div className="cityIndex">
        <NavHeader>选择城市</NavHeader>
        {/* 渲染城市信息 */}
        <AutoSizer>
          {({ height, width }) => (
            <List
              ref={this.cityListComponent}
              width={width}
              height={height}
              rowCount={this.state.cityIndex.length}
              rowHeight={this.getRowHeight}
              rowRenderer={this.rowRenderer}
              onRowsRendered={this.onRowsRendered}
              scrollToAlignment="start"
            />
          )}
        </AutoSizer>
        {/* 右侧列表内容 */}
        <ul className="city_index">{this.renderCityIndex()}</ul>
      </div>
    );
  }
}
